<template>
	<view class="content">
		<view class="buyhead">
			<view class="pageHeader">
				转让区
				<view class="generalBack" @click="backpage()" hover-class="none">
					<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
				</view>
			</view>
			<view class="blueteam">
				<view class="sortop">
					<view style="padding:10upx 24upx;font-size: 24upx;color: #333;position: relative;" class="flex aic jc-center" >
						<input class="ser-input" type="search" placeholder="搜索转让区订单" v-model="searchString" @change="search()"/>
					</view>
				</view>
			</view>
		</view>
		<view class="regoodbox">
			<view style="margin-top: 20upx;">
				<view v-if="transList.length === 0" class="empty">
					<image src="/static/empty.png" mode="widthFix"></image>
					<view class="empty-tips">暂无可转让商品~</view>
				</view>
				<view class="buyitem" v-for="(trasitem, transindex) in transList" :key="transindex">
					<view class="flex" style="position: relative;padding:14upx 20upx;">
						<view style="width: 146upx;height: 146upx;">
							<image :src="trasitem.images" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="flex-1" style="font-size: 28upx;color: #666;">
							<view class="goods-info">{{ trasitem.title }}</view>
							<view style="margin-top:10upx;font-size: 24upx;color: #EC6104;">订单号：{{ trasitem.order_no }}</view>
							<view style="margin-top:10upx;font-size: 24upx;color: #1D84E8;" v-if="trasitem.order_type=='12'">订单类型：油卡订单</view>
							<view style="color: #EC6104;font-size: 28upx;margin-top: 8upx;">￥{{ trasitem.price }}</view>
							<view class="flex aic jc-end"><button class="sure defbtn" @click="buynow(trasitem)">购买</button></view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :loadingType="loadingType" :contentText="contentText" v-if="count"></uni-load-more>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js';
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		data() {
			return {
				userToken: '', // token
				phone: '',
				code: '',
				state: 0,
				// 滚动
				transEmpty: null,
				// 头部的筛选
				// 抢购区列表
				buypageindex: 0, //抢购的分页
				pagenum: 8, // 分页数量
				transpageindex: 0, //转让的分页
				transList: [], // 转让区列表
				searchString:'',//转让区搜索订单
				keywords:'',
				loadingType: 0,
				count:false,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "你成功的触碰了我的底线"
				},
				page_total:'',
			};
		},

		mounted() {
			
		},
		onShareAppMessage:function(obj){
		    return {
		        title: '转让区产品',
		        path:'/pages/hotfunc/transfer',
		        imageUrl: ''
		    }
		},
		onShow() {
			let that = this
			that.userToken = uni.getStorageSync('token')
			console.log(that.pass_id)
			that.get_trans_msg()
			
		},
		onLoad(options) {
			let that = this;
		},
		components: {
			uniLoadMore
		},
		methods: {
			// 返回上一页
			backpage() {
				uni.reLaunch({
					url:'../tab/index'
				})
			},
			
			// 转让区的购买
			buynow(item) {
				uni.navigateTo({
					url: '../order/transconfirm?item=' + JSON.stringify(item),
					animationDuration: 300
				});
			},
			// 获取转让区信息
			get_trans_msg() {
				let that = this;
				let pst = {
					m: that.transpageindex,
					n: that.pagenum,
					token:that.userToken,
					keyword:that.searchString,
					status:0,
					type:0
				};
				postAjax('Panicbuying/OrderTransferList', pst, function(data) {
					console.log(data.data)
					that.transList = data.data;
					if (that.transList.length == 0) {
						that.transEmpty == 0;
					}
				});
			},
			onReachBottom() {
				let that = this
				if (that.loadingType !== 0) {
					return;
				}
				that.loadingType = 1;
				let lists = [];
				
				if(that.chooseIndex ==0){
					return
				}
				let firstdata = {
					m: ++that.transpageindex,
					n: that.pagenum,
					token:that.userToken,
					keyword:that.searchString,
					status:0,
					type:0
				}
				let linkUrl = 'Panicbuying/OrderTransferList'
				postAjax(linkUrl, firstdata, function(data) {
					console.log(data)
					lists = data.data
					console.log(lists.length)
					that.count = lists.length>0
					if(lists.length>0){
						setTimeout(() => {
							that.transList = that.transList.concat(lists);
							that.loadingType = 0;
						}, 500);
						
					}else{
						that.loadingType = 0;
						// that.buypageindex = 0
					}
				})
			},
			// 转让区的搜索
			search() {
				let that = this
				that.keywords = that.searchString;
				that.get_trans_msg();
			}
		}
	};
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #f9f9f9;
		position: relative;
		overflow: hidden;
	}
	.ser-input{font-size: 28upx;padding: 16upx 20upx;border-radius: 20vw;border:2upx solid #d9d9d9;width: 80%;background-color: #fff;}
	.buyhead{
		width: 100%;
		padding-top: 40upx;
		background-color: #1d84e8;
		z-index: 100;
		position: fixed;
		left: 0;
		top:0
	}
	.pageHeader {
		height: 128upx;
		line-height: 128upx;
		text-align: center;
		font-size: 36upx;
		color: #fff;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 0;
		display: block;
		padding:0 40upx;
	}

	

	.sure {
		background: linear-gradient(90deg, #ffa060 0%, #ec6104 100%);
	}

	.defbtn {
		padding: 0;
		margin: 0;
		display: block;
		font-size: 28upx;
		width: 170upx;
		border-radius: 10upx;
		height: 60upx;
		line-height: 60upx;
		color: #fff;
	}

	.defbtn::after {
		border: 0;
	}

	.regoodbox {
		padding:0 30upx;
		margin-top:300upx;
	}

	.buyitem {
		background-color: #fff;
		padding: 30upx 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
	}

	.flex-1 {
		flex: 1;
		margin-left: 16upx;
	}

	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 420upx;
	}
	.sortop {
		margin: 0 30upx;
		padding: 0 10upx 20upx;
		border-radius: 20upx;
		
		/* box-shadow: #d4e5ff 0upx 0upx 10upx 1upx; */
	}

	.sort>.flex-1 {
		flex: 1;
		position: relative;
	}

	.sort>.flex-1:nth-child(1)::after {
		content: '';
		width: 2upx;
		height: 100%;
		background-color: #eee;
		position: absolute;
		top: 0upx;
		right: 0;
	}

	.topactive {
		color: #1d84e8;
	}

	.eliplis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}


	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #f9f9f9;
	}

	.empty image {
		width: 240upx;
		margin-bottom: 30upx;
	}

	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	}

	.fundbox {
		height: 30upx;
		overflow: hidden;
	}
</style>
